<template>
    <div>
        <el-dialog center title="关联商户" :visible.sync="show" width="36%" :before-close="close" class="custom-size__dialog">
            <!-- <el-form :inline="true" :model="filters" ref="searchForm">
                <el-form-item prop="name">
                    <el-input size="mini" v-model="filters.name" clearable placeholder="商户名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="mini" icon="el-icon-search" type="primary" @click="onSearch">查询</el-button>
                    <el-button size="mini" icon="el-icon-refresh-left" @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
            <el-row type="flex" style="margin-bottom: 10px;" justify="space-between">
                <div>
                    <el-button type="primary" plain size="mini" @click="assoicateBusiness" icon="fa fa-link">
                        关联商户
                    </el-button>
                    <el-button type="danger" plain size="mini" @click="cancelAssoicate" icon="fa fa-unlink">
                        取消关联
                    </el-button>
                </div>
                <el-tooltip content="刷新" placement="top">
                    <el-button circle icon="el-icon-refresh-right" size="mini" @click="refresh"></el-button>
                </el-tooltip>
            </el-row>
            <el-table ref="table" height="500" :data="dataList" @selection-change="selectionChange">
                <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
                <el-table-column align="center" type="selection" width="70">

                </el-table-column>
                <el-table-column align="center" label="商户名称" prop="name">

                </el-table-column>
                <el-table-column align="center" label="关联状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.state === 1" size="mini" effect="dark">已关联</el-tag>
                        <el-tag type="info" v-else size="mini" effect="dark">未关联</el-tag>

                    </template>
                </el-table-column>
            </el-table> -->
            <el-select v-model="ids" placeholder="请选择关联商户" multiple clearable filterable>
                <el-option v-for="item in dataList" :label="item.name" :value="item.id" :key="item.id"></el-option>
            </el-select>
            <div slot="footer">
                <el-button type="primary" @click="assoicateBusiness">确定</el-button>
                <el-button @click="close">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import BusinessApi from "@/api/business/business"
export default {

    props: {
        businessId: {
            type: Number | String
        },
        show: {
            type: Boolean,
            default: false,
        }
    },
    data() {
        return {
            dataList: [

            ],
            ids: [],
            filters: {
                name: "",//商户名称
                state: "",//1 关联 2未关联
            },
        }
    },
    watch: {
        show(val) {
            if (val) {
                this.listData()
            }
        }
    },
    mounted() {

    },
    methods: {
        handleSizeChange(size) {
            this.page.pageSize = size
            this.listData()
        },
        handleCurrentChange(val) {
            this.page.pageNo = val
            this.listData()
        },
        refresh() {
            this.resetForm()
            this.onSearch()
        },
        selectionChange(val) {
            this.ids = val.map(item => item.id)
        },
        listData() {
            let params = {
                // pageNo: this.page.pageNo,
                // pageSize: this.page.pageSize,
                // userRole: 3,
                // type:3,
                // state: this.filters.state,
                // name: this.filters.name,
                outBusinessId: this.businessId,
            }
            BusinessApi.listRelationBusiness(params).then(res => {
                this.dataList = res.data||[]
                this.ids = this.dataList.filter(item=>item.state).map(item=>item.id)
                // console.log(this.dataList,128)
                // this.page.pageTotal = res.data.total
            })
        },
        onSearch() {
            this.page.pageNo = 1
            this.listData()
        },
        resetForm() {
            this.$refs.searchForm.resetFields()
        },
        close() {
            this.$emit("closeAssociate")
        },
        assoicateBusiness() {
            if (this.ids <= 0) {
                this.$message({
                    type: "warning",
                    message: "请至少选择一项"
                })
                return
            }
            this.$confirm("确认是否关联？", "提示", {}).then(res => {
                let params = {
                    id: this.businessId,
                    ids: this.ids,
                }
                BusinessApi.batchRelationBusiness(params).then(res => {
                    this.$Utils.notifySuccess("设置关联成功")
                    // this.listData()
                    this.close()
                })
            })
        },
        // cancelAssoicate() {
        //     if (this.ids <= 0) {
        //         this.$message({
        //             type: "warning",
        //             message: "请至少选择一项"
        //         })
        //         return
        //     }
        //     this.$confirm("是否取消关联？", "提示", {}).then(res => {
        //         let params = {
        //             relationId: this.businessId,
        //             userRole: 3,
        //             relationType: 3,
        //             relationIds: this.ids,
        //             type:1, //1 取消关联 2关联
        //         }
        //         AssoicateApi.setAssoicate(params).then(res => {
        //             this.$Utils.notifySuccess()
        //             this.listData()
        //         })
        //     })
        // }
    },
}
</script>

<style lang="scss" scoped>
.el-dialog__wrapper {
    ::v-deep .el-dialog{
        .el-dialog__body {
            padding-bottom: 200px !important;

        }
    }
}
</style>

